<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>js中新的运算符使用技巧</title>
  <!-- https://juejin.cn/post/6954902440915238920#heading-2 -->
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
  </style>
</head>

<body>
  <div></div>
</body>
<script>
  "use strict"; {
    // 1.可选链接运算符
    let obj = {
      age: 19,
      sayhai() {
        console.log(`我的年纪: ${this.age}`);
      },
      aa: {
        cc: 199
      }
    };
    console.log(obj?.age);
    // 没有用可选链将会报错
    // console.log(obj?.ahhh.bb);
    console.log(obj?.ahhh?.bb);
    // 对于方法: 如果不存在这个方法将不会执行该方法了
    obj.sayhai?.();
    obj?.bb?.();
  }; {
    // 与无效合并一起使用 (??)
    let obj = {
      age: 20
    };
    let dd = () => {
      console.log(`看`);
      return `行`;
    };
    obj?.aa?.cc ?? dd();
  };
  {
    /* 
    判断方式不同：
    使用 ?? 时，只有当值1为null或undefined时才返回值2；
    使用 || 时，值1会转换为布尔值判断，为true返回值1，false 返回值2
    */

    undefined ?? 2	// 2
    null ?? 2		// 2
    0 ?? 2			// 0
    "" ?? 2			// ""
    true ?? 2		// true
    false ?? 2		// false


    undefined || 2	// 2
    null || 2		// 2
    0 || 2			// 2
    "" || 2			// 2
    true || 2		// true
    false || 2		// 2
  }
</script>

</html>